<template>
  <div class="pageContent2">
    <div class="centerAll">
      <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="基础设置" name="1">
            <Basis></Basis>
          </el-collapse-item>
          <el-collapse-item title="药品相关设置" name="2">
            <Drug></Drug>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
  import Basis from '../officina_detail/basis.vue'
  import Drug from '../officina_detail/drug/index.vue'
  import {
    ref
  } from 'vue'

  const activeNames = ref(['1'])
  const handleChange = (val) => {
    console.log(val)
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    background: #f6f6f6;
    padding: 0px 15px;
    color: #373737;
  }

  ::v-deep .el-collapse-item__content {
    padding: 20px 40px;
  }

  .pageContent2 {
    background: #fff;
    position: relative;
    width: 100%;
    padding-bottom: 20px;
    min-height: 86vh;
  }
</style>